<template>
  <view class="list-wrap">
    <view class="list">
      <view class="top">
        <view class="img">
          <su-image
            :current="0"
            src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250514/3f0190543c1c23823aa81b038dc50ae9.png"
            :width="38"
            :height="38"
            mode="scaleToFill"
          ></su-image>
        </view>
        <view class="title ss-line-1">鲸囍云店名称</view>
        <view class="desc">共5件商品</view>
      </view>
      <view class="shop-area">
        <scroll-view scroll-x="true" scroll-with-animation="true" class='scrollContainer'>
          <view class="item" v-for="item in 8" :key="item">
            <view class="img">
              <su-image
                :current="0"
                src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250514/3f0190543c1c23823aa81b038dc50ae9.png"
                :width="199"
                :height="199"
                mode="scaleToFill"
              ></su-image>
            </view>
            <view class="con">
              <view class="title ss-line-1">标题标题标题标题标题标题</view>
              <view class="price">
                <view class="unit">￥</view>
                <view class="num">100</view>
              </view>
              <view class="commission">佣金12%</view>
            </view>
          </view>
        </scroll-view>
      </view>
      <!-- <view class="action">
        <view class="text-area">23时22分59秒后自动拒绝</view>
        <view class="btn-area">
          <view class="refund">拒绝</view>
          <view class="agree">接受邀请</view>
        </view>
      </view> -->
      <view class="action">
        <view class="text-area">
          <view>销售额 ￥454.3</view>
          <view>佣金 ￥22.4</view>
        </view>
        <view class="btn-area">
          <view class="refund">结束合作</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import sheep from '@/sheep';
import { computed, reactive } from 'vue';
const emit = defineEmits(['detail', 'del', 'share', 'select'])
const props = defineProps({
  layout: {
    type: String,
    default: 'vertical',
    validator: (value) => ['vertical', 'horizontal'].includes(value)
  },
  product: {
    type: Object,
    default() {},
  },
  isEdit: {
    type: Boolean,
    default: false
  },
  isSelected: {
    type: Boolean,
    default: false
  }
  
});

const state = reactive({
  shopId: '',
  userId: '',
})

const userInfo = computed(() => sheep.$store('user').userInfo);
state.shopId = userInfo.value.cyq_store_id
state.userId = userInfo.value.id

const handleToDetail = () => {
  console.log(props.product, 'product==')
  const params = {
    shopid: state.shopId,
    user_id: state.userId,
    id: props.product.id,
    store_id: state.shopId
  }
  sheep.$router.go('/pages/goods/index', params )
}

const handleItemClick = () => {
  if (props.isEdit) {
    // In edit mode, emit select event
    emit('select', props.product.id);
  } else {
    // In normal mode, go to detail
    handleToDetail();
  }
}
</script>

<style lang='scss' scoped>

@import '../style/cooperation-list.scss';
</style>